<template>
  <div class="timeline-container">
    <el-timeline v-if="events && events.length > 0">
      <el-timeline-item
        v-for="(activity, index) in events"
        :key="index"
        :timestamp="formatTime(activity.event_time)"
        :type="getType(activity.event_type)"
        :color="getColor(activity.event_type)"
        placement="top"
      >
        <el-card class="timeline-card">
          <h4>{{ activity.event_type === 'bank' ? '资金交易' : '通话记录' }}</h4>
          <p>{{ activity.event_summary }}</p>
          <div class="meta-info" v-if="activity.location">
              <el-icon><Location /></el-icon> {{ activity.location }}
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-empty v-else description="暂无时间轨迹数据" />
  </div>
</template>

<script setup>
import { Location } from '@element-plus/icons-vue';

const props = defineProps({
  events: {
    type: Array,
    default: () => []
  }
});

const formatTime = (timeStr) => {
    if (!timeStr) return '';
    const date = new Date(timeStr);
    return date.toLocaleString('zh-CN', { hour12: false });
};

const getType = (type) => {
    if (type === 'bank') return 'primary';
    if (type === 'call') return 'success';
    return 'info';
};

const getColor = (type) => {
    if (type === 'bank') return '#409EFF';
    if (type === 'call') return '#67C23A';
    return '#909399';
};
</script>

<style scoped>
.timeline-container {
    padding: 20px;
    max-height: 600px;
    overflow-y: auto;
}

.timeline-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.timeline-card p {
    margin: 0;
    color: #606266;
}

.meta-info {
    margin-top: 8px;
    font-size: 12px;
    color: #909399;
    display: flex;
    align-items: center;
    gap: 4px;
}
</style>
